<template>
    <div class="page-wrapper" style="height:900px; background:#F5F7FA;">
        <div class="page-content" style="padding-top:90px; position:relative; " >
            <div class="title" style="margin-bottom:80px;">华翊动态</div>
            <div class="control">
                <div class="btn" @click="handleScroll('left')"><el-icon><ArrowLeftBold /></el-icon></div>
                <div class="btn" @click="handleScroll('right')"><el-icon><ArrowRightBold /></el-icon></div>
            </div>
            <div class="scroller-container">
                
                <div class="scroller-viewBox" :style="{ transform:`translateX( ${scrollIndex * 100}%)` }">
                    <div
                        v-for="(item, index) in list"
                        :key="index"
                        class="card-wrapper"
                        @click="$router.push('/about/news')"
                    >
                        <div class="card">
                            <div class="card-image" :style="{ backgroundImage:`url(${getFullPath(item.coverImagePath)})` }"></div>
                            <div class="card-content">
                                <div class="card-title">{{ item.tittle }}</div>
                                <div class="card-desc">{{  htmlToString(item.content) }}</div>
                                <div class="card-extra">
                                    <div style="color:#99A0AE; font-size:16px; ">{{  item.createTime }}</div>
                                    <div class="tag">{{ item.category }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="line-height:20px; color:#335CFF; margin:40px 0; text-align:center; cursor:pointer;" @click="$router.push('/about/news')" >更多资讯</div>
        </div>
    </div>

</template>

<script setup>
    import { watch, ref, onMounted } from 'vue';
    import { markAction, getFullPath, getContentList } from '@/api/global.js';
    import { ElMessage } from 'element-plus';
    import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
    import avatarImg from '../../../public/test1.png';
    const scrollIndex = ref(0);
    const timer = ref(null);
    const list = ref([]);
    let lock = false;
    let splitNum = 0;
    function htmlToString(html) {
      var tempDiv = document.createElement("div");
      tempDiv.innerHTML = html;
      return tempDiv.textContent || tempDiv.innerText || "";
    }
    const handleScroll = (direc)=>{
        // 判断是左侧滚动到头
        if ( !lock ) {
            lock = true;
            timer.value = setTimeout(()=>{
                lock = false;
            }, 500)
            if ( scrollIndex.value === 0 && direc === 'left'  ) {
                ElMessage('左侧没有内容了');
                return;
            }
            if ( ( list.length <=3 || splitNum === Math.abs(scrollIndex.value - 1 )) && direc === 'right'  ) {
                ElMessage('右侧没有内容了');
                return;
            }
            // 判断是右侧滚动到底
            if ( direc === 'left' ) {
                ++scrollIndex.value
            } else {
                --scrollIndex.value;
            }
        }
    }
    const fetchContentList = ()=>{
        getContentList({ page:1, pageSize:20, contentType:'动态' })
        .then(res=>{
            if ( res.data.code === 200 ) {
                splitNum = Math.ceil(res.data.data.length / 3);
                list.value = res.data.data;
            }
        })
    }
    onMounted(()=>{
        fetchContentList();
    })
</script>
<style scoped>
    .scroller-container {
        width:100%;
        position:relative;
        overflow:hidden;
    }
    .control {
        position:absolute;
        right:24px;
        top:170px;
    }  
    .control .btn {
        display:inline-block;
        width:48px;
        height:48px;
        line-height:48px;
        text-align:center;
        border-radius:50%;
        border: 1px solid#cacfd8;
        margin-right:32px;
        cursor: pointer;
    }
    .control .btn:hover {
        background-color:#e5e5e7;
    }
    .control .btn:last-child {
        margin-right:0;
    }
    .scroller-viewBox {
        width:100%;
        transition:all 0.8s ease-in-out;
        white-space:nowrap;
    }
 
    .scroller-viewBox .card-wrapper:nth-child(3n+ 1) {
        margin-left: 2px;;
    }
</style>